<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定制编辑器测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h1>定制编辑器测试</h1>
        
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5>模板选择测试</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="testTemplateSelect" class="form-label">选择底板</label>
                            <select class="form-select" id="testTemplateSelect">
                                <option value="">请选择底板</option>
                                <option value="5">模板5</option>
                                <option value="6">模板6 (XL_TIF底板)</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <button class="btn btn-primary" id="loadTemplateBtn">加载模板</button>
                            <button class="btn btn-secondary" id="clearTemplateBtn">清除模板</button>
                        </div>
                        
                        <div id="templateInfo" class="mt-3"></div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5>Canvas测试</h5>
                    </div>
                    <div class="card-body">
                        <canvas id="testCanvas" width="600" height="400" 
                                style="border: 1px solid #ccc; background: white;"></canvas>
                        
                        <div class="mt-3">
                            <div id="canvasInfo"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>测试日志</h5>
                    </div>
                    <div class="card-body">
                        <div id="testLog" style="height: 200px; overflow-y: auto; background: #f8f9fa; padding: 10px; font-family: monospace; font-size: 12px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <script>
        let testCanvas = null;
        let testCtx = null;
        let backgroundImage = null;
        
        function log(message) {
            const timestamp = new Date().toLocaleTimeString();
            $('#testLog').append(`[${timestamp}] ${message}\n`);
            $('#testLog').scrollTop($('#testLog')[0].scrollHeight);
            console.log(message);
        }
        
        $(document).ready(function() {
            testCanvas = document.getElementById('testCanvas');
            testCtx = testCanvas.getContext('2d');
            
            log('测试页面初始化完成');
            
            $('#loadTemplateBtn').on('click', function() {
                const templateId = $('#testTemplateSelect').val();
                if (templateId) {
                    loadTemplate(templateId);
                } else {
                    log('请先选择模板');
                }
            });
            
            $('#clearTemplateBtn').on('click', function() {
                clearCanvas();
                $('#templateInfo').html('');
                log('画布已清除');
            });
            
            $('#testTemplateSelect').on('change', function() {
                const templateId = $(this).val();
                if (templateId) {
                    log(`选择模板: ${templateId}`);
                    loadTemplate(templateId);
                }
            });
        });
        
        function loadTemplate(templateId) {
            log(`开始加载模板: ${templateId}`);
            
            $.ajax({
                url: `/api/template/${templateId}/regions`,
                method: 'GET',
                success: function(response) {
                    log(`模板API响应成功: ${response.template.name}`);
                    
                    $('#templateInfo').html(`
                        <h6>模板信息</h6>
                        <p>名称: ${response.template.name}</p>
                        <p>尺寸: ${response.template.width} x ${response.template.height}</p>
                        <p>图片路径: ${response.template.image_path || '无'}</p>
                        <p>区域数量: ${response.regions.length}</p>
                    `);
                    
                    if (response.template.image_path) {
                        loadBackgroundImage(response.template.id);
                    } else {
                        log('模板没有背景图片');
                        drawTemplate(response.template);
                    }
                },
                error: function(xhr) {
                    log(`模板API请求失败: ${xhr.status} ${xhr.statusText}`);
                }
            });
        }
        
        function loadBackgroundImage(templateId) {
            log(`开始加载背景图片: template_id=${templateId}`);
            
            const img = new Image();
            img.crossOrigin = 'anonymous';
            
            img.onload = function() {
                backgroundImage = img;
                log(`背景图片加载成功: ${img.width}x${img.height}`);
                drawCanvas();
                
                $('#canvasInfo').html(`
                    <p>背景图片: ${img.width}x${img.height}</p>
                    <p>Canvas尺寸: ${testCanvas.width}x${testCanvas.height}</p>
                `);
            };
            
            img.onerror = function(e) {
                log(`背景图片加载失败: ${img.src}`);
                console.error('图片加载错误:', e);
            };
            
            const imageUrl = `/template_image/${templateId}?t=${Date.now()}`;
            log(`图片URL: ${imageUrl}`);
            img.src = imageUrl;
        }
        
        function drawCanvas() {
            if (!testCtx) return;
            
            // 清空画布
            testCtx.clearRect(0, 0, testCanvas.width, testCanvas.height);
            
            // 绘制白色背景
            testCtx.fillStyle = '#ffffff';
            testCtx.fillRect(0, 0, testCanvas.width, testCanvas.height);
            
            // 绘制背景图片
            if (backgroundImage) {
                testCtx.drawImage(backgroundImage, 0, 0, testCanvas.width, testCanvas.height);
                log('背景图片已绘制到Canvas');
            }
        }
        
        function clearCanvas() {
            if (testCtx) {
                testCtx.clearRect(0, 0, testCanvas.width, testCanvas.height);
                testCtx.fillStyle = '#ffffff';
                testCtx.fillRect(0, 0, testCanvas.width, testCanvas.height);
            }
            backgroundImage = null;
        }
    </script>
</body>
</html>
